<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <composite:interface>

    </composite:interface>

    <composite:implementation>

        <h:outputStylesheet library="css" name="bootstrap.min.css" />
        
        <h:form id="tabuadaForm">

            <h:panelGrid id="panel" columns="3" border="1" cellpadding="5"
                         cellspacing="5" style="margin: 0 auto;">
                <f:facet name="header">
                    <h:panelGroup style="display:block; text-align:center">
                        <h:outputText value="#{messages.QUESTIONNUM}" class="navbar-text" />
                        <h:outputText value="#{tabuadaBean.questionCounter}" class="navbar-text" />
                    </h:panelGroup>
                    <h:panelGroup style="display:block; text-align:center">
                        <h:outputText value="#{messages.TABUADA_GAME}" class="navbar-text" />
                        <h:graphicImage id="image" library="images" name="#{tabuadaBean.image}" />					
                    </h:panelGroup>
                </f:facet>

                <h:outputLabel id="question" value="#{tabuadaBean.question}" class="navbar-text" />

                <h:inputText autocomplete="off" id="answer" size="2" class="form-control" value="#{tabuadaBean.answer}"/>

                <h:commandButton id="submit" value="#{messages.NEXT}" action="#{tabuadaBean.checkAnswer}" class="btn btn-default navbar-bt" />
            </h:panelGrid>
            <h:inputHidden id="correctAnswer" value="#{tabuadaBean.correctAnswer}" />
            <h:inputHidden id="questionCounter" value="#{tabuadaBean.questionCounter}" />

        </h:form>
        <!-- /.navbar-collapse -->


    </composite:implementation>
</html>